<template>
  <nav class="navbar">
    <div class="nav-content">
      <a href="./#home" class="nav-item">功能特性</a>
      <a href="./#cases" class="nav-item">用户案例</a>
      <a href="./#faq" class="nav-item">FAQ</a>
      <router-link to="/test-image-generation" class="nav-item test-link">API测试</router-link>
      <div class="auth-buttons">
        <SignedIn>
          <!-- 自定义用户菜单 -->
          <div class="user-menu-container" ref="userMenuContainer">
            <div class="user-avatar" @click="toggleUserMenu">
              <img :src="userAvatarUrl" alt="用户头像" class="avatar-img" />
            </div>
            
            <!-- 用户下拉菜单 -->
            <div class="user-dropdown" v-if="isUserMenuOpen">
              <div class="dropdown-header">
                <div class="user-info">
                  <img :src="userAvatarUrl" alt="用户头像" class="dropdown-avatar" />
                  <div class="user-details">
                    <div class="user-name">{{ userName }}</div>
                    <div class="user-id">{{ userId }}</div>
                  </div>
                </div>
              </div>
              <div class="dropdown-divider"></div>
              <div class="dropdown-menu">
                <a href="/my-works" class="dropdown-item" @click="showMyWorks">
                  <i class="menu-icon">🖼️</i>
                  我的作品
                </a>
                <a href="#" class="dropdown-item" @click="handleManageAccount">
                  <i class="menu-icon">⚙️</i>
                  Manage account
                </a>
                <a href="#" class="dropdown-item" @click="handleSignOut">
                  <i class="menu-icon">↪️</i>
                  Sign out
                </a>
              </div>
              <div class="dropdown-footer">
                <div class="powered-by">Secured by <span class="clerk-logo">clerk</span></div>
                <div class="dev-mode">Development mode</div>
              </div>
            </div>
          </div>
        </SignedIn>
        <SignedOut>
          <SignInButton mode="modal" />
        </SignedOut>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { SignedIn, SignedOut, SignInButton, useClerk, useUser } from '@clerk/vue'
import { ref, onMounted, onUnmounted, watch } from 'vue'
import { useRouter } from 'vue-router'

const clerk = useClerk()
const { user } = useUser()
const router = useRouter()

// 用户菜单状态
const isUserMenuOpen = ref(false)
const userMenuContainer = ref<HTMLElement | null>(null)

// 用户信息
const userAvatarUrl = ref('https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png') // 默认头像
const userName = ref('用户')
const userId = ref('user123')

// 监听用户数据变化
watch(() => user.value, (newUser) => {
  if (newUser) {
    console.log('用户数据已更新:', newUser)
    userAvatarUrl.value = newUser.imageUrl || userAvatarUrl.value
    userName.value = newUser.fullName || newUser.username || '用户'
    userId.value = newUser.username || newUser.id || 'user123'
  }
}, { immediate: true })

// 获取用户信息
onMounted(() => {
  // 添加点击外部关闭菜单的事件监听
  document.addEventListener('click', handleOutsideClick)
})

onUnmounted(() => {
  document.removeEventListener('click', handleOutsideClick)
})

// 切换用户菜单显示状态
const toggleUserMenu = (event: Event) => {
  event.stopPropagation()
  isUserMenuOpen.value = !isUserMenuOpen.value
}

// 关闭用户菜单
const closeUserMenu = () => {
  isUserMenuOpen.value = false
}

// 处理点击菜单外部
const handleOutsideClick = (event: MouseEvent) => {
  if (
    userMenuContainer.value && 
    !userMenuContainer.value.contains(event.target as Node)
  ) {
    isUserMenuOpen.value = false
  }
}

// 显示我的作品
const showMyWorks = (event: Event) => {
  event.preventDefault()
  router.push('/my-works')
  closeUserMenu()
}

// 处理账户管理
const handleManageAccount = () => {
  clerk.value?.openUserProfile()
  closeUserMenu()
}

// 处理退出登录
const handleSignOut = () => {
  clerk.value?.signOut()
  closeUserMenu()
}
</script>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 64px;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-item {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.test-link {
  background: rgba(255, 87, 87, 0.2);
}

.test-link:hover {
  background: rgba(255, 87, 87, 0.3);
}

.auth-buttons {
  margin-left: auto;
  position: relative;
}

/* 用户菜单样式 */
.user-menu-container {
  position: relative;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.2s;
}

.user-avatar:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 下拉菜单样式 */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background-color: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  overflow: hidden;
  animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-header {
  padding: 16px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 2px;
}

.user-id {
  font-size: 12px;
  color: #999;
}

.dropdown-divider {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0;
}

.dropdown-menu {
  padding: 8px 0;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s;
}

.dropdown-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.menu-icon {
  margin-right: 12px;
  font-style: normal;
  font-size: 16px;
}

.dropdown-footer {
  padding: 12px 16px;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.powered-by {
  font-size: 12px;
  color: #888;
}

.clerk-logo {
  font-weight: 500;
  color: #aaa;
}

.dev-mode {
  font-size: 12px;
  color: #ff9800;
}

/* 移除Clerk原生按钮样式 */
:deep(.cl-userButtonTrigger) {
  display: none !important;
}

:deep(.cl-userButtonBox) {
  color: #fff !important;
}

:deep(.cl-internal-b3fm6y) {
  color: #fff !important;
}

@media (max-width: 768px) {
  .nav-content {
    padding: 0 16px;
    gap: 16px;
  }

  .nav-item {
    padding: 8px 12px;
    font-size: 13px;
  }
}
</style>
